<template>
	<div class="bigbody">
		<div class="dowebok" :class="showclass">
			<div class="form-container sign-up-container">
				<div class="getform">
					<h1>注册</h1>
					<span>请输入您的信息</span>
					<input type="text" placeholder="账号">
					<input type="text" placeholder="昵称">
					<input type="password" placeholder="以字母开头只能包含字母、数字和下划线">
					<input type="password" placeholder="确认密码">
					<button>注册</button>
					<div class="mytext">用于个人博客，暂未开放注册</div>
				</div>
			</div>
			<div class="form-container sign-in-container">
				<div class="getform">
					<h1>登录</h1>
					<span>或使用您的帐号</span>
					<input v-model="username" type="text" placeholder="账号">
					<input v-model="password" type="password" placeholder="密码">
					<!-- <input v-model="passkey" type="password" placeholder="秘钥"> -->
					<a href="###">忘记密码？</a>
					<button @click="getlogin">登录</button>
				</div>
			</div>
			<div class="overlay-container">
				<div class="overlay">
					<div class="overlay-panel overlay-left">
						<h1>已有帐号？</h1>
						<p>请使用您的帐号进行登录</p>
						<button class="ghost" v-on:click="signInButton">登录</button>
					</div>
					<div class="overlay-panel overlay-right">
						<h1>没有帐号？</h1>
						<p>立即注册加入我们，和我们一起开始旅程吧</p>
						<button class="ghost" v-on:click="signUpButton">注册</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref } from 'vue'
// import { sha256 } from 'js-sha256'
import Cookies from "js-cookie";
import { GoToLogin } from "../api/login";
import { useRouter } from "vue-router";
const router = useRouter();

let showclass = ref('dowebok')
const username = ref('')
const password = ref('')
// const passkey = ref('')

const getlogin = async () => {
	let ums = await GoToLogin(username.value, password.value)
	const { resultCode, resultInfo, token } = ums
	if (resultCode == 1) {
		console.log(resultInfo);
		// localStorage.setItem("TOKEN", token);
		Cookies.set("TOKEN", token);
		let {username,nick,headerimg,_id,gender,telephone,mail } = resultInfo;
		let userArr = {username,nick,headerimg,_id,gender,telephone,mail }
		localStorage.setItem("user", JSON.stringify(userArr));
		// 2.1 保存角色ID
		localStorage.setItem("_id",_id);
		// 2. 保存用户信息
		// saveUser({
		// 	username:username,
		// 	nick:nick,
		// 	headerimg:headerimg,
		// 	gender:gender,
		// 	telephone:telephone,
		// 	mail:mail
		// })
		// console.log(userLnformationStore.userLnformation);
		//   Cookies.set("user", { username, nick, headerimg });
		router.replace({ path: '/home' })
	} else {
		alert(resultInfo)
	}
}
const signInButton = () => {
	console.log(showclass.value);
	showclass.value = 'dowebok'
}
const signUpButton = () => {
	console.log(showclass.value);
	showclass.value = "dowebok right-panel-active"
}
</script>
<style lang="scss" scoped>
.bigbody {
	font-family: 'Montserrat', sans-serif;
	background: #f6f5f7;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100vh;
	margin: -20px 0 50px;

	.dowebok {
		background: #fff;
		border-radius: 10px;
		box-shadow: 0 14px 28px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .22);
		position: relative;
		overflow: hidden;
		width: 768px;
		max-width: 100%;
		min-height: 480px;

		h1 {
			font-weight: bold;
			margin: 0;
		}

		span {
			font-size: 12px;
		}

		a {
			color: #333;
			font-size: 14px;
			text-decoration: none;
			margin: 15px 0;
		}

		p {
			font-size: 14px;
			line-height: 20px;
			letter-spacing: .5px;
			margin: 20px 0 30px;
		}

		.form-container {
			position: absolute;
			top: 0;
			height: 100%;
			transition: all .6s ease-in-out;

			.getform {
				background: #fff;
				display: flex;
				flex-direction: column;
				padding: 0 85px;
				height: 100%;
				justify-content: center;
				align-items: center;
				text-align: center;
			}

			input {
				background: #eee;
				border: none;
				padding: 12px 15px;
				margin: 8px 0;
				width: 100%;
				outline: none;
			}
		}
	}


	button {
		border-radius: 20px;
		border: 1px solid lightseagreen;
		background: lightseagreen;
		color: #fff;
		font-size: 12px;
		font-weight: bold;
		padding: 12px 45px;
		letter-spacing: 1px;
		text-transform: uppercase;
		transition: transform 80ms ease-in;
		cursor: pointer;

		:active {
			transform: scale(.95);
		}

		:focus {
			outline: none;
		}
	}

	.ghost {
		background: transparent;
		border-color: #fff;
	}
}

.overlay-container {
	position: absolute;
	top: 0;
	left: 50%;
	width: 50%;
	height: 100%;
	overflow: hidden;
	transition: transform .6s ease-in-out;
	z-index: 100;

	.overlay {
		background: lightseagreen;
		background: linear-gradient(to right, lightseagreen, lightseagreen) no-repeat 0 0 / cover;
		color: #fff;
		position: relative;
		left: -100%;
		height: 100%;
		width: 200%;
		transform: translateY(0);
		transition: transform .6s ease-in-out;

		.overlay-panel {
			position: absolute;
			top: 0;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 0 40px;
			height: 100%;
			width: 50%;
			text-align: center;
			transform: translateY(0);
			transition: transform .6s ease-in-out;
		}

		.overlay-right {
			right: 0;
			transform: translateY(0);
		}

		.overlay-left {
			transform: translateY(-20%);
		}
	}
}


/* Move signin to right */
.dowebok.right-panel-active {
	.sign-in-container {
		transform: translateY(100%);
	}

	.overlay-container {
		transform: translateX(-100%);
	}

	.sign-up-container {
		transform: translateX(100%);
		opacity: 1;
		z-index: 5;
	}

	.overlay {
		transform: translateX(50%);
	}

	.overlay-left {
		transform: translateY(0);
	}

	.overlay-right {
		transform: translateY(20%);
	}
}
</style>